<template>
  <div class="order_wc" v-if="!isLoading && dataList" style="
    position: absolute;
    top: 0px;
    width: 100%;
    ">
			<div class="wc_up">
				<div class="wc_up_icon iconfont"></div>
				<div class="wc_up_txt">订单已完成</div>
				<div class="wc_up_time">下单时间：{{orderTime}}</div>
				<div class="wc_up_info">如需改变请联系商家做改变</div>
			</div>
			<div class="order_item padding">
						<group>
							<cell :title="dataList.shopName" is-link link="/">
								<img slot="icon" width="20" style="display:block;margin-right:5px; border-radius:50%;width:1rem;height:1rem;" :src="dataList.shopImg">
							</cell>
						</group>
				
					<div class="order_info order_info_left">
						<div class="order_det_info " v-for="(item,key) in dataList.orderItems" :key="key">
							<div class="det_info_name" v-text="item.productName"></div>
							<div class="det_info_num" v-text="'X'+item.quantity"></div>
							<div class="det_info_num" v-text="'￥'+item.totalPrice"></div>
						</div>
						<div class="order_item_total total_padding">
							<div class="total_mon_two">实付：</div>
							<div class="total_det_two">￥{{dataList.totalPrice}}</div>
						</div>
					</div>
			</div>
			<div class="order_remark">
				<div class="remark_up">备注：</div>
				<div class="remark_down">
					<div class="rem_down_tab" v-if="dataList.tableNo">台&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：{{dataList.tableNo}}</div>
					<div class="rem_down_tab" v-if="dataList.takeTime">取餐时间：{{dataList.takeTime}}</div>
					<div class="rem_down_per" v-if="dataList.mealsNumber">用餐人数：{{dataList.mealsNumber}}人</div>
					<!-- <div class="rem_down_info">
						<div>口味偏好：</div>
						<div class="down_info_right">{{remarkText||inputText? remarklist: ''}}</div>
					</div> -->
				</div>
			</div>
			<!-- 没有评价显示评价 -->
			<div class="determine" v-if="dataList.commented === 0 && dataList.status === 2">评价</div>

			<div class="order_down" v-if="dataList.commented === 1 && dataList.status === 2">
				<div class="ord_down_title">
					<div class="tit_txt">我的评价: <rater v-model="reviewNote.star" slot="value"  :margin="10" :font-size="15" style="margin-left:1rem" disabled></rater></div>
					<!-- <div class="iconfont edit"></div> -->
					<!-- <div class="edit_txt">修改评价</div> -->
				</div>
				<div class="item_cont" >{{reviewNote.statement}}</div>
					<!-- <div class="item_down">
						<img src="" class="comm_pho_two" />
						<img src="" class="comm_pho_two" />
						<img src="" class="comm_pho_two" />
						<img src="" class="comm_pho_two" />
							<img src="" class="comm_pho_two" />
						<img src="" class="comm_pho_two" />
					</div> -->
			</div>
		</div>
</template>
<script>
import {Group,Cell, dateFormat,Rater} from 'vux'
import {getStore} from '@/config/mUtils'
import {mapActions} from 'vuex'
// import {mapGetters,mapState} from 'vuex'
export default{
	components: {
		Group,
		Cell,
		Rater
	},
	data(){
		return{
			isLoading: false,
			dataList: {},
			orderTime: null,
			reviewNote: {}
		}
	},
	created(){
		this.initData(this.$route.query.id)
	},
	methods:{
		...mapActions([
			'setHeaderTitle'
		]),
		initData(id){
			this.isLoading = true
			this.$http.get(`order/openId/${getStore('wxcode')}/id/${id}/detail`)
				.then(({data})=>{
					if(data.status === '200' && data.data){
						this.isLoading = false
						this.dataList = data.data.orderInfo
						this.reviewNote = data.data.reviewNote
						// 设置页面标题
						this.setHeaderTitle(data.data.shopName)
						this.orderTime = dateFormat(data.data.orderInfo.orderTime,'YYYY/MM/DD HH:mm:ss')
					}
				}).catch(err=>{
					this.$vux.toast.show({
						type: 'warn',
						text: '请求数据错误',
						time: 2000
					})
				})
		}
	},
	computed: {
		// ...mapState({
		// 	remarkText: state => state.shop.remarkText,
    //   inputText: state => state.shop.inputText,
    //   num1: state=> state.shop.num1
    // }),
    // ...mapGetters([
		// 	'cartProducts'
		// ]),
		// 计算口味偏好
		// remarklist (){
    //   let str = new String;
    //   if (this.remarkText) {
    //     Object.values(this.remarkText).forEach(item => {
    //         str += item[1] + '，';
    //     })
    //   }
    //     //是否有自定义备注，分开处理
    //     if (this.inputText) {
    //         return str += this.inputText;
    //     } else {
    //       return str.substr(0, str.lastIndexOf('，')) ;
		// 		}
		// }
	}
}
</script>
<style scoped>
.order_item{
	width: 100%;
	background-color: #fff;

}
.store_info{
	display: -webkit-box;
	-webkit-box-align: center;
	font-size: 0.5rem;
	padding: 0.4rem 0;
	margin-left: 0.4rem;
	border-bottom: 1px solid #e5e5e5;
}
.datermine{
	background-color:#2e9671;font-size:.6rem;color:#fff;text-align:center;margin:.6rem;line-height:1.3rem;border-radius:0.2rem;
}
.choose:after{
  font-family: 'iconfont';
	content: "\b008";
	font-size: 0.8rem;
	color: #2e9670;
	margin-right: 0.26rem;
	padding-left: 0.1rem;
}
.store_name{
	-webkit-box-flex: 1;
	font-weight: 700;
	font-size: 0.46rem;
}
.comm_right:before{
	font-family: 'iconfont';
	content: "\c001";
	font-size: 0.7rem;
	margin-right: 0.28rem;
	color: #aaaaaa;
}
.order_det_info{
	display: -webkit-box;
    font-size: 0.48rem;
	padding-top: 0.5rem;
	padding-left: 0.3rem;
	margin-left: 0.4rem;
}
.det_info_name{
	-webkit-box-flex: 1;
}
.det_info_num{
	width: 2.3rem;
}
.order_info_more{
	text-align: center;
	font-size: 0.36rem;
	padding: 0.3rem 0 0.26rem 0;
	border-bottom: 1px solid #e5e5e5;
	color: #727272;
}
.order_item_total{
	display: -webkit-box;
	-webkit-box-align: center;
	padding: 0.42rem 0;
}
.ord_it_to_border{
		border-bottom: 0.3rem solid #f7f7f7;
}
.total_mon{
	-webkit-box-flex: 1;
	margin-left: 0.5rem;
	font-size: 0.5rem;
	font-weight: 700;
}
.total_det{
	margin-right: 1.3rem;
	color: #727272;
	font-size: 0.4rem;
}
.order_bottom{
	width: 100%;
	display: -webkit-box;
	position: fixed;
	bottom: 0;
	left: 0;
	-webkit-box-align: center;
	font-size: 0.5rem;
	background-color: #fff;
	padding-left: 0.4rem;
}
.order_bottom :nth-child(2){
	font-size: 0.44rem;
	color: #727272;
}
.order_mon{
	-webkit-box-flex: 1;
	text-align: end;
	margin-right: 0.4rem;
}
.order_account{
	width: 4.1rem;
	height: 1.56rem;
	background-color: #2e9670;
	color: #fff;
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	font-size: 0.46rem;
}
.more_down:after{
  font-family: 'iconfont';
	content: "\c005";
	margin-left: 0.2rem;
	font-size: 0.5rem;
}
.more_up:after{
  font-family: 'iconfont';
	content: "\c006";
	margin-left: 0.2rem;
	font-size: 0.5rem;
}
.order_wc{
	width: 100%;
	margin-bottom: 1.4rem;
}
.wc_up{
	width: 100%;
	background-color: #fff;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: center;
}
.wc_up_icon{
		margin-top: 0.4rem;
}
.wc_up_icon:after{
	font-family: 'iconfont';
	content: "\b008";
	color: #2e9670;
	font-size: 2.4rem;
}
.wc_up_txt{
	font-size: 0.5rem;
	color: #000;
	margin: 0.34rem 0 0.5rem;
}
.wc_up_time{
	font-size: 0.42rem;
	color: #2e9670;
	
}
.wc_up_info{
	font-size: 0.4rem;
	color: #aaaaaa;
	margin: 0.1rem 0 0.74rem 0;
}
.store_nane_left{
	margin-left: 0.3rem;
	-webkit-box-flex: 1;
	font-size: 0.46rem;
}
.store_info_two{
	display: -webkit-box;
	-webkit-box-align: center;
	font-size: 0.5rem;
	padding: 0.24rem 0;
	margin-left: 0.5rem;
	border-bottom: 1px solid #e5e5e5;
}
.item_user_pho{
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 1.1rem;
	border: 1px solid #979797;
}
.padding{
	margin-top: 0.3rem;
}
.order_info_left{
	margin-left: 0.5rem;
}
.total_padding{
	padding-top: 0.2rem;
	border-top: 1px solid #e5e5e5;
	margin-top: 0.5rem;
}
.total_det_two{
	font-size: 0.56rem;
	color: #000;
	font-weight: 700;
	margin-right: 0.5rem;
}
.order_remark{
	background-color: #fff;
	margin-top: 0.3rem;
}
.remark_up{
	font-size: 0.5rem;
	padding: 0.4rem 0;
	margin-left: 0.5rem;
	border-bottom: 1px solid #E5E5E5;
}
.remark_down{
	padding: 0.3rem 0 0.5rem 1.16rem;
	font-size: 0.42rem;
	color: #727272;
}
.rem_down_info{
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-flex: 1;
}
.down_info_right{
	-webkit-box-flex: 1;
	margin-right: 0.2rem;
}
.remark_down div{
	margin-top: 0.1rem;
}
.order_down{
	margin-top: 0.2rem;
	background-color: #fff;
}
.ord_down_title{
	display: -webkit-box;
	-webkit-box-align: start;
	-webkit-box-pack: start;
	padding: 0.2rem 0 0.3rem 0;
	margin-left: 0.5rem;
	border-bottom: 1px solid #e5e5e5;
}
.tit_txt{
	font-size: 0.46rem;
	font-weight: 700;
	margin: 0.22rem 0.2rem 0 0;
}
.edit{
	-webkit-box-flex: 1;
	text-align: end;
}
.comm_star_pad{
	margin-top: 0.1rem;
}
.edit:after{
	font-family: 'iconfont';
	content: "\c004";
	color: #AAAAAA;
	font-size: 0.7rem;
}
.edit_txt{
	font-size: 0.4rem;
	color: #b3b3b3;
	margin: 0.22rem 0.5rem 0 0.2rem;
}
.item_cont{
	font-size: 0.42rem;
	margin: 0 0.5rem 0.3rem 1.24rem;
	padding: 1.125rem 0rem;
}
.item_down{
	width: 84%;
	display: -webkit-flex;
	-webkit-flex-flow: wrap;
	margin: 0 2rem 0 1.24rem;
	padding-bottom: 0.4rem;
}

.total_mon_two{
	-webkit-box-flex: 1;
	font-size: 0.5rem;
	font-weight: 700;
}
</style>
